<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-${vueClass}">
      <!-- 搜索条件表单 -->
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryDataList()" class="${lowerClassName}SearchForm">
        <!-- 条件 -->
        <#if queryColumns??>
          <#list queryColumns as column>
            <#if column.hasDict == true>
        <el-form-item>
          <ren-select size="mini" v-model="dataForm.${column.lowerColumnName}"  paramType="2" paramCode="${column.dictType}" placeholder="${column.fieldRemark}"></ren-select>
        </el-form-item>
              <#else>
                <#if column.fieldQueryType == 'BETWEEN'>
                  <#if column.hasD == true>
        <el-form-item>
          <el-date-picker
                  size="mini"
                  v-model="${column.lowerColumnName}Temp"
                  type="${column.fieldType}range"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="${column.fieldRemark}开始"
                  end-placeholder="${column.fieldRemark}结束">
          </el-date-picker>
        </el-form-item>
                  <#else>
        <el-form-item>
          <el-input size="mini" v-model="dataForm.${column.lowerColumnName}Start" placeholder='最小${column.fieldRemark}' clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="mini" v-model="dataForm.${column.lowerColumnName}End" placeholder="最大${column.fieldRemark}" clearable></el-input>
        </el-form-item>
                  </#if>
                    <#else>
                        <#if column.showType == '文本框'>
        <el-form-item>
            <el-input size="mini" v-model="dataForm.${column.lowerColumnName}" placeholder='${column.fieldRemark}' clearable></el-input>
        </el-form-item>
                            <#elseif column.showType == '日期控件' && column.hasD == true>
                                <!-- 不管什么格式都传入yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
                size="mini"
                v-model="dataForm.${column.lowerColumnName}"
                type="${column.fieldType}"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择${column.fieldRemark}"
        >
        </el-date-picker>
                        </#if>

            </#if>

            </#if>
          </#list>
        </#if>

        <!-- 按钮 -->
        <el-form-item>
          <el-button size="mini" v-if="$hasPermission('${lowerClassName}:queryPage')" @click="queryDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" v-if="$hasPermission('${lowerClassName}:add')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" v-if="$hasPermission('${lowerClassName}:del')" type="danger" @click="delHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
      </el-form>




      <!-- 列表-表格 -->
      <el-table
              v-loading="dataListLoading"
              :data="dataList"
              border
              @selection-change="dataListSelectionChangeHandle"
              @sort-change="dataListSortChangeHandle"
              style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <#if listColumns??>
          <#list listColumns as column>
            <#if column.hasDict == true>
              <el-table-column prop="${column.lowerColumnName}" label="${column.fieldRemark}" header-align="center" align="center" min-width="50px">
                <template slot-scope="scope">
                  <cellsdict :paramKey="scope.row.${column.lowerColumnName}+''" paramType="2" paramCode="${column.dictType}"  ref="cellsdict" ></cellsdict>
                </template>
              </el-table-column>
              <#else>
                <el-table-column prop="${column.lowerColumnName}" label="${column.fieldRemark}" header-align="center" align="center"></el-table-column>
            </#if>
          </#list>
        </#if>

        <!-- 表格操作按钮 -->
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('${lowerClassName}:modify')" type="text" size="small" @click="addOrUpdateHandle(scope.row.${pkLowerColName})">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('${lowerClassName}:del')" type="text" size="small" @click="delHandle(scope.row.${pkLowerColName})">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
              :current-page="pageNo"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle">
      </el-pagination>



        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="queryDataList"></add-or-update>

    </div>
  </el-card>
</template>

<script>
  import mixinViewModule from '@/mixins/view-module'
  import AddOrUpdate from './${lowerClassName}-add-or-update'
  export default {
    mixins: [mixinViewModule],
    data () {
      return {
        mixinViewModuleOptions: {
          getDataListURL: '/pc/${lowerClassName}/queryPage',
          getDataListIsPage: true,
          deleteURL: '/pc/${lowerClassName}/del',
          deleteIsBatch: true
        },
        addOrUpdateVisible: false,
        dataForm: {
            <#if queryColumns??>
                <#list queryColumns as column>
                    <#if column.hasDict == true>
            ${column.lowerColumnName}:'',
                        <#else>
                        <#if column.fieldQueryType == 'BETWEEN' && column.hasD == false>
            ${column.lowerColumnName}Start:null,
            ${column.lowerColumnName}End:null,
                            <#elseif column.fieldQueryType != 'BETWEEN'>
            ${column.lowerColumnName}:'',
                        </#if>
                    </#if>
                </#list>
            </#if>
        },

          <#if queryColumns??>
              <#list queryColumns as column>
                  <#if column.fieldQueryType == 'BETWEEN' && column.hasD == true>
          ${column.lowerColumnName}Temp:null,
                  </#if>
              </#list>
          </#if>
        }
    },
    mounted() {

    },
    components: {
      AddOrUpdate
    },
    methods:{
      queryDataList(){

          <#if queryColumns??>
              <#list queryColumns as column>
              <#if column.fieldQueryType == 'BETWEEN' && column.hasD == true>
                  if(this.${column.lowerColumnName}Temp != null){
                      this.dataForm.${column.lowerColumnName}Start = this.${column.lowerColumnName}Temp[0] + ''
                      this.dataForm.${column.lowerColumnName}End = this.${column.lowerColumnName}Temp[1] + ''
                  }else{
                      this.dataForm.${column.lowerColumnName}Start = null
                      this.dataForm.${column.lowerColumnName}End = null
                  }
              </#if>
              </#list>
          </#if>
        this.getDataList();
      }
    }
    ,
    destroyed () {

    }
  }
</script>

<style lang="scss">
    .${lowerClassName}SearchForm label {
        line-height: 28px
    }
</style>